<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
    z-index属性用来设置定位元素的层叠顺序 (仅对定位元素有效)
    口 取值可以是正整数、负整数、0
   
    比较原则
    口 如果是兄弟关系
        z-index越大，层叠在越上面
        z-index相等，写在后面的那个元素层叠在上面
    口 如果不是兄弟关系
        各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
        而且这2个定位元素必须有设置z-index的具体数值
    */
    .item{
        position: fixed;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;
        background-color: red;
    }
    .box2{
        left: 20px;
        top: 20px;
        background-color: green;
        z-index: -1;

    }
    .box3{
        left: 40px;
        top:40px;
        background-color: blue;

    }
</style>
<body>
    <div class="item box1">1</div>
    <div class="item box2">2</div>
    <div class="item box3">3</div>
</body>
</html>